<template>
  <div class="dashboard-container">
    <el-card shadow="never" class="mt-1">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-row class="h-80px">
            <el-col :span="6">
              <el-statistic align="center" title="初始资金" :precision="2" :value="initial" />
            </el-col>
            <el-col :span="6">
              <el-statistic align="center" title="银证转账" :precision="2" :value="transfer" />
            </el-col>
            <el-col :span="6">
              <el-statistic align="center" title="负债利息" :precision="2" :value="debtFee" />
            </el-col>
            <el-col :span="6">
              <el-statistic align="center" title="本金合计" :precision="2" :value="totalCost" />
            </el-col>
          </el-row>
          <el-row class="h-80px">
            <el-col :span="6">
              <el-statistic align="center" title="股市现金" :precision="2" :value="stockCash" />
            </el-col>
            <el-col :span="6">
              <el-statistic align="center" title="持仓市值" :precision="2" :value="stockHolding" />
            </el-col>
            <el-col :span="6">
              <el-statistic align="center" title="外部资金" :precision="2" :value="outerCash" />
            </el-col>
            <el-col :span="6">
              <el-statistic align="center" title="当前资产" :precision="2" :value="totalAsset" />
            </el-col>
          </el-row>
          <el-row class="h-80px">
            <el-col :span="6">
              <el-statistic align="center" title="当前应付" :precision="2" :value="repay" />
            </el-col>
            <el-col :span="6">
              <el-statistic align="center" title="当前盈余" :precision="2" :value="surplus" />
            </el-col>
            <el-col :span="6">
              <el-statistic align="center" title="总收益额" :precision="2" :value="earnings" />
            </el-col>
            <el-col :span="6">
              <el-statistic align="center" title="总收益率" :precision="2" :value="yields">
                <template #suffix>%</template>
              </el-statistic>
            </el-col>
          </el-row>
        </el-col>

        <el-col :span="12">
          <DebtCanvas width="100%" />
        </el-col>
      </el-row>
    </el-card>

    <el-card shadow="never" class="mt-2">
      <div class="operation-line-container">
        <el-button
          v-hasPerm="['stock:stockTrading:add']"
          type="primary"
          @click="handleOpenTradingEditDialog()"
        >
          <template #icon><Plus /></template>
          新增
        </el-button>
        <el-switch v-model="autoRefresh" size="large" />
      </div>
      <el-table
        ref="dataTableRef"
        v-loading="loading"
        :data="pageData"
        highlight-current-row
        :header-cell-style="{ 'text-align': 'center' }"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column
          v-if="false"
          key="id"
          label="主键"
          prop="id"
          min-width="50"
          align="center"
        />
        <el-table-column key="code" label="股票代码" prop="code" min-width="50" align="center" />
        <el-table-column key="name" label="股票名称" prop="name" min-width="50" align="center" />
        <el-table-column key="yield" label="市值" prop="yield" min-width="50" align="center" />
        <el-table-column key="yield" label="盈亏" prop="yield" min-width="50" align="center" />
        <el-table-column key="income" label="成本" prop="income" min-width="50" align="center" />
        <el-table-column key="yield" label="现价" prop="yield" min-width="50" align="center" />
        <el-table-column key="yield" label="持仓" prop="yield" min-width="50" align="center" />
        <el-table-column key="yield" label="今日涨幅" prop="yield" min-width="50" align="center" />
        <el-table-column
          key="yield"
          label="今日走势（开盘/最低/最高）"
          prop="yield"
          min-width="150"
          align="center"
        />

        <el-table-column fixed="right" label="操作" width="220">
          <template #default="scope">
            <el-button
              v-hasPerm="['stock:stockTrading:query']"
              type="primary"
              size="small"
              link
              @click="handleOpenTradingTableDialog(scope.row)"
            >
              <template #icon><Tickets /></template>
              买卖
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery()"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "Dashboard",
  inheritAttrs: false,
});

import DebtCanvas from "./components/debt-canvas.vue";

import StockHoldingAPI, {
  StockHoldingPageVO,
  StockHoldingForm,
  StockHoldingPageQuery,
} from "@/api/stock/stock-holding";

import StockTradingAPI, {
  StockTradingPageVO,
  StockTradingForm,
  StockTradingPageQuery,
} from "@/api/stock/stock-trading";

import StockReportAPI, { StockReport } from "@/api/stock/stock-report";

const autoRefresh = ref(true);
const initial = ref(0.0);
const transfer = ref(0.0);
const debtFee = ref(0.0);
const totalCost = computed(() => {
  return Number(initial.value) + Number(transfer.value) + Number(debtFee.value);
});
const stockCash = ref(0.0);
const stockHolding = ref(0.0);
const outerCash = ref(0.0);
const totalAsset = computed(() => {
  return Number(stockCash.value) + Number(stockHolding.value) + Number(outerCash.value);
});
const repay = ref(0.0);
const surplus = computed(() => {
  return Number(totalAsset.value) - Number(repay.value);
});
const earnings = computed(() => {
  return Number(totalAsset.value) - Number(totalCost.value);
});
const yields = computed(() => {
  return Number(earnings.value) / Number(totalCost.value);
});

function getReport() {
  console.log("321");
  StockReportAPI.getReport().then((data) => {
    console.log(data);
    initial.value = data.initial;
    transfer.value = data.transfer;
    debtFee.value = data.debtFee;
    stockCash.value = data.stockCash;
    outerCash.value = data.outerCash;
    repay.value = data.repay;
  });
}

onActivated(() => {
  console.log("123");
  getReport();
});
</script>

<style lang="scss" scoped>
.dashboard-container {
  position: relative;
  padding: 10px;
}

.operation-line-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1px;
}
.el-button {
  margin-right: auto; /* 确保按钮靠左 */
}
.el-switch {
  margin-left: auto; /* 确保开关靠右 */
}
</style>
